// 首页
.home-wrapper {

    // 顶部按钮
    .top {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        gap: 20px;

        // 按钮
        .ant-btn {
            height: 88px;
            border-radius: 12px;
            white-space: pre-wrap;
        }

        // 主要按钮
        .power {
            background: var(--redLiner);
            font-weight: bold;
            color: white !important;
            border-color: transparent !important;
            border-radius: 8px;
            color: #FFFFFF;
            font-size: 22px;
            height: 56px;
            padding: 0 15px;
            align-self: flex-start;
        }
    }

    // 下面两部分
    section {
        display: flex;
        gap: 25px;

        &>div {
            background: #F3F5F7;
            border-radius: 10px;
            padding: 10px 20px;
            flex: 1;
            min-height: 100px;
        }

        .left {

            // 顶部
            header {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .refresh {
                    opacity: 0.4;
                    font-family: Helvetica;
                    font-size: 16px;
                    color: #333333;
                }
            }

            // 下面白色的盒子
            .box {
                background: #FFFFFF;
                border-radius: 10px;
                margin-top: 20px;
                padding: 10px 20px;

                // 标题
                p {
                    opacity: 0.4;
                    font-size: 18px;
                    color: #333333;
                }

                // 按钮
                .buttons {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    margin: 10px 0;

                    .ant-btn {
                        flex: 1;
                        height: 48px;
                        border: 1px solid var(--btnBG);
                        color: var(--btnBG);
                    }
                }

                // 电流
                .electric {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    gap: 10px;

                    // 数字输入框
                    .ant-input-number {
                        background: rgba(51, 51, 51, 0.06);
                        border-radius: 2px;
                        border: none;
                    }
                }
            }
        }

        .right {

            // 标题
            h3 {
                font-weight: 400;
                font-size: 20px;
                color: #333333;
                margin-bottom: 15px;
            }

            // 电源按钮
            .power-buttons {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
                background: #FFFFFF;
                border-radius: 10px;
                height: 96px;
                margin-bottom: 15px;

                .ant-btn {
                    background: var(--redLiner);
                    font-size: 18px !important;
                    color: #FFFFFF !important;
                    border-color: transparent !important;
                    font-weight: bold;
                    border-radius: 28px;
                    height: 56px;
                    width: 200px;

                    &.up {
                        background: var(--greenLiner);
                    }
                }
            }

            // 下面的盒子
            .box {
                background: #FFFFFF;
                border-radius: 10px;
                padding: 15px 20px 20px;

                .type-box {
                    display: flex;
                    gap: 30px;
                }

                // 标题
                p {
                    opacity: 0.4;
                    font-size: 18px;
                    color: #333333;
                    margin-bottom: 10px;
                }

                // 下拉列表
                .s-dropdown-wrapper {
                    margin-bottom: 15px;
                }

                // 下拉选项
                .ant-btn-group {
                    border: 1px solid var(--btnBG);
                    border-radius: 4px;

                    .ant-btn {
                        border: none;
                    }
                }

                // 所有类型按钮
                .types {
                    border-radius: 4px;
                    width: 150px;
                    margin-bottom: 20px;
                }

                // 按钮
                .buttons {
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    .ant-btn {
                        height: 48px;
                        border-color: var(--btnBG);
                        border-radius: 4px;
                        font-size: 20px;
                        color: var(--btnBG);
                        padding: 0 20px;
                    }
                }
            }
        }
    }
}